<template>
	<!-- 商家入驻 -->
	<view class="">
		<view class="step-box p-2">
			<step :options="list" :active="active" @itemClick="getClickItem" />
		</view>
	</view>
</template>

<script>
	import step from "@/components/uni-ui/uni-steps/uni-steps.vue"
	import $store from '@/store/index.js'
	export default {
		components: {
			step
		},
		props:{
			active:{
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				list: [{
					title: '商家入驻',
					id: 0,
					url: '/pages/register/settlement'
				}, {
					title: '个人认证',
					id: 1,
					url:"/pages/register/personal"
				}, {
					title: '店铺认证',
					id: 2
				}, {
					title: '等待审核',
					id: 3
				}],
				checked: false
			}
		},
		methods: {
			getClickItem(item) {
				// 点击步骤条跳转到对应页面
				let stepNUmber = $store.state.user.setp
				if (item.id <= stepNUmber) {
					uni.navigateTo({
						url: item.url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.step-box {
		background: #F8F8F8;
	}

	.button-box {
		position: absolute;
		bottom: 0;
		background: #F8F8F8;
		height: 200upx;
		width: 100%;
		box-sizing: border-box;
	}

	.radio {
		display: flex;
		flex-direction: row;
		align-items: center;
		checkbox {
		  border-radius: 15rpx; /* 可以根据需要调整圆角的大小 */
		}
	}

	.uni-list-cell {
		justify-content: flex-start
	}
</style>